* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #000;
}
.container {
  position: relative;
  width: 100%;
  height: 100vh;
}
.container .box {
  position:  absolute;
  top: calc(50% - 200px);
  left: calc(50% - 200px);
  width: 400px;
  height: 400px;
  transform-style: preserve-3d; /* 表示所有子元素在3D空间呈现 */
  transform: rotateX(-18deg) rotateY(17deg) translate3d(12px, -34px, -86px); /* 旋转正方体在空间中的位置及投影，前两个参数控制投影，第三个参数控制空间位置 */
}
.container .box > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.container .box > div span{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 1);
  background: #ccc;
}
.container .box > div span video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(0);
}
.container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px);
}
.container .box > div span:nth-child(1) {
  transform: rotateX(0deg) translate3d(0, 0, 200px);
}
.container .box > div span:nth-child(2) {
  transform: rotateX(-90deg) translate3d(0, 0, -200px);
}
.container .box > div span:nth-child(2) video {
  transform: rotateX(180deg);
}
.container .box > div span:nth-child(3) {
  transform: rotateY(-90deg) translate3d(0, 0, 200px);
}